function bump(obj1,obj2){
	var obj1Info = obj1.getBoundingClientRect();
	var obj2Info = obj2.getBoundingClientRect();
	var t1 = obj1Info.top,
		l1 = obj1Info.left,
		r1 = obj1Info.right,
		b1 = obj1Info.bottom;
		
	var t2 = obj2Info.top,
		l2 = obj2Info.left,
		r2 = obj2Info.right,
		b2 = obj2Info.bottom;
	
	if(r1 < l2 || l1 > r2 || t1 > b2 || b1 < t2){
		console.log("没有");
		return false;
	}else{
		console.log("碰到");
		return true;
	}
}

var startBtn = document.querySelector(".box button");
var web = document.querySelector(".web");


startBtn.addEventListener("click",()=>{
	startBtn.parentNode.style.transform = "translateX(-100%)";
	getCircle();
});

function getCircle(){
	var div = document.createElement("div");
	var clientW = web.clientWidth;
	var clientH = web.clientHeight;
	
	var divW = divH = Math.floor(Math.random()*40+15);
	
	var divT = Math.floor(Math.random()*clientH)
	var divL = Math.floor(Math.random()*clientW)
	
	divT > clientH - divH ? divT = clientH - divH : '';
	divL > clientW - divW ? divL = clientW - divW : '';
	
	div.style.width = `${divW}px`;
	div.style.height = `${divH}px`;
	div.style.top = `${divT}px`;
	div.style.left = `${divL}px`;
	div.style.borderRadius = "50%";
	div.style.backgroundColor = "white";
	div.style.position = "absolute";
	div.classList.add("lastOne");
	web.appendChild(div);
	return div
}

//将事件代理/委托 到容器上
web.addEventListener("click",function(event){
	if(event.target.classList.contains("lastOne")){
		var divBox = document.querySelector(".box1");
		divBox.style.transition="all 1.5s";
		divBox.style.transform="translateX(0)";
		setTimeout(()=>{
			divBox.style.transition="all 1.5s";
			divBox.style.transform="translateX(100%)"
		},1500);
		setTimeout(()=>{
			divBox.style.transition="";
			divBox.style.transform="translateX(-100%)"
		},3000);
	}
	var allBall = document.querySelectorAll(".web div");
	setTimeout(()=>{
		//	判断是否为最后一个,是则创建新圆并进行检测,否则游戏结束
		if(event.target.classList.contains("lastOne")){
			event.target.classList.remove("lastOne");
			console.log("是最后一个");
			var newCircle = getCircle();
			console.log(newCircle);
			(function check(target){
				allBall.forEach((e,index)=>{
					console.log(e)
					if(bump(e,target)){
						target.remove();
						var newCircle = getCircle();
						check(newCircle);
					}
					divBox.innerHTML=`<p>分数:${index+1}</p>`;
				});
			}(newCircle));
		}
	},1500);
	var Aball = 0;
	for(var i = 0;i<allBall.length;i++){
		Aball++;
	}
	console.log(Aball)
	if((!event.target.classList.contains("lastOne")) && (!event.target.classList.contains("web"))){
		var divBox2 = document.querySelector(".box2");
		var divBtn = document.querySelector(".box2 button")
		var data = document.querySelector(".data")
		divBox2.style.transform="translateX(0)";
		data.innerText=`最终分数:${Aball-1}`;
		divBtn.addEventListener("click",()=>{
			location.reload()
		})
	}

});


